<template>
  <div class="layout">
    <el-container class="box">
      <el-container class="box-body">
        <el-aside class="box-aside">
          <div class="logo">
            CS
            <span v-if="!isCollapse">&nbsp;&nbsp;System</span>
          </div>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#001529"
            text-color="hsla(0,0%,100%,.65)"
            active-text-color="#fff"
            :router="true"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="/home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <template v-for="menu in menus">
              <el-menu-item v-if="menu.children.length < 1" :index="menu.route" :key="menu.id">
                <i :class="menu.icon"></i>
                <span slot="title">{{ menu.name }}</span>
              </el-menu-item>
              <el-submenu v-else :index="menu.id">
                <template #title>
                  <i :class="menu.icon"></i>
                  <span>{{ menu.name }}</span>
                </template>
                <el-menu-item v-for="child in menu.children" :index="child.route">
                  <span slot="title">{{ child.name }}</span>
                </el-menu-item>
                <!-- <el-menu-item :index="home">hello world</el-menu-item> -->
              </el-submenu>
            </template>
          </el-menu>
        </el-aside>
        <el-container class="box-content">
          <el-header class="box-header">
            <span class="switch-btn" @click="handleCollapse()">
              <i class="el-icon-s-fold"></i>
            </span>
            <div class="head-tool">
              <span class="avatar">
                <img src="/public/avatar.png" alt />
                &nbsp;{{ username }}
              </span>
              <span class="el-icon-setting reset-pwd" @click="resetPwd">&nbsp;修改密码</span>
              <span class="el-icon-switch-button logout" @click="logout">&nbsp;退出</span>
            </div>
            <form id="logout-form" action="/logout" method="POST" style="display: none">
              <input type="hidden" name="_token" />
            </form>
          </el-header>
          <el-main>
            <router-view />
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
    <reset-password :user_id="1" v-model:dialogShow="dialogShow"></reset-password>
  </div>
</template>

<script setup>

import { useRouter } from "vue-router"
import { reactive, toRefs } from 'vue'
import { getMyselfMenu } from "../api/menu"
import resetPassword from "../components/ResetPassword.vue"

const state = reactive({
  dialogShow: false,
  isCollapse: false,
  username: '',
  menus: [],
})

const router = useRouter()

state.username = window.sessionStorage.getItem('username')
const user_id = window.sessionStorage.getItem('user_id')

const handleCollapse = () => {
  state.isCollapse = !state.isCollapse
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
}

const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
}

const logout = () => {
  window.sessionStorage.removeItem('token')
  window.sessionStorage.removeItem('user_id')
  window.sessionStorage.removeItem('username')

  router.push({ name: 'login' })
}

const resetPwd = () => {
  state.dialogShow = true
}

getMyselfMenu().then(data => {
  state.menus = data.menus
})

const { dialogShow, isCollapse, username, menus } = toRefs(state)

</script>

<style scoped>
.layout {
  height: 100%;
}

.box {
  height: 100%;
}

.box-header {
  background-color: #fff;
  height: 65px !important;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  display: flex;
  flex-direction: row;
  padding-left: 0 !important;
}

.box-aside {
  background-color: #001529;
  width: auto !important;
}

.el-menu {
  border-right: none;
}

.el-main {
  padding: 0;
  overflow: hidden;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}

.switch-btn {
  display: block;
  width: 65px;
  height: 65px;
  text-align: center;
  color: rgba(0, 0, 0, 0.65);
  line-height: 65px;
  font-size: 20px;
}

.logo {
  width: 100%;
  height: 65px;
  line-height: 65px;
  background-color: #002140;
  font-size: 20px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-weight: 600;
  vertical-align: middle;
}

.head-tool {
  line-height: 65px;
  overflow: hidden;
  margin-left: auto;
}

.head-tool .avatar {
  color: #409eff !important;
}
.head-tool .avatar img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.head-tool span {
  padding: 0 10px;
  height: 65px;
  line-height: 65px !important;
  display: inline-block;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
}

.head-tool span:hover {
  background: rgba(0, 0, 0, 0.025);
}

.el-header {
  padding: 0;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
}

.el-menu-item:hover {
  color: #fff !important;
}
</style>